<template>
  <div class="carousel">
    <div class="wheel-container">
      <div :class="{ 'wheel': true, 'spinning': spinning }">
        <div v-for="(prize, index) in prizes" :key="index" class="sector" :style="getSectorStyle(index)">
          {{ prize }}
        </div>
      </div>

    </div>
    <div class="white_img">
      <img src="/src/assets/images/指针.png" alt="">
      <button class="button"
              @click="startLottery"
              :disabled="spinning">立即抽奖
      </button>
    </div>
    <div class="count">
      <span>当前剩余抽奖次数：{{ this.count}}</span>
    </div>
  </div>
</template>
<script>
import { Dialog, Toast  } from 'vant'
export default {
  name: "TagPage1_copy",
  data() {
    return {
      prizes: [
        '520红包',
        '一包辣条',
        '200红包',
        '1314红包',
        '一套护肤品',
        '香奈儿香水',
      ],
      spinning: false,
      count: 0
    };
  },
  inject: ['$apiUrl', '$headImgUrl'],
  mounted() {
    this.$nextTick(() =>{
      this.initDate();
    })
  },
  methods: {
    startLottery() {
      if (!this.spinning) {
        if (this.count > 0){
          this.spinning = true;
          // 模拟抽奖过程，旋转一段时间后停止
          setTimeout(() => {
            const randomIndex = Math.floor(Math.random() * this.prizes.length);
            Dialog.alert({
              title: '恭喜你中奖了！',
              allowHtml: true,
              message: `<span style="color: #f7954c">奖品是：${this.prizes[randomIndex]}</span>`,
            }).then(() => {
              // on close
              this.removeCount()
            });
            this.spinning = false;
          }, 3000);
        }else if (this.count == 0 || this.count < 0){
          Dialog.confirm({
            title: '你当前抽奖次数为0！',
            allowHtml: true,
            message: `<span style="color: #f7954c">和老公亲亲可获得抽奖次数：</span>`,
          }).then(() => {
            // on close
            Dialog.confirm({
              title: '确认是否亲亲！',
              allowHtml: true,
              message: `<span style="color: #f7954c">确认已和老公完成了亲亲</span>`,
            }).then(() => {
              // on close
              this.addCount()
            });
          });
        }

      }
    },
    // 初始话数据
    async  initDate(){
      let phone = localStorage.getItem("username");
      console.log(phone)
      const prizeInfo = {
        phone: phone
      }
      const url = this.$apiUrl + '/prizeInfo/getInfo';
      const {data: res} = await this.$http.post(url, prizeInfo);
      console.log(res)
      if (res.code === 200){
        this.count = res.data.count;
      }
    },
    // 修改数据（添加）
    async  addCount(){
      let phone = localStorage.getItem("username");
      console.log(phone)
      const prizeInfo = {
        phone: phone,
        count: 1
      }
      const url = this.$apiUrl + '/prizeInfo/updateInfo';
      const {data: res} = await this.$http.post(url, prizeInfo);
      console.log(res)
      if (res.code === 200){
        Toast('恭喜获得一次抽奖次数！');
        this.count = res.data.count;
      }
    },
    // 修改数据(减少)
    async  removeCount(){
      let phone = localStorage.getItem("username");
      console.log(phone)
      const prizeInfo = {
        phone: phone,
        count: -1
      }
      const url = this.$apiUrl + '/prizeInfo/updateInfo';
      const {data: res} = await this.$http.post(url, prizeInfo);
      console.log(res)
      if (res.code === 200){
        this.count = res.data.count;
      }
    }
  },
  computed: {
    getSectorStyle() {
      return (index) => {
        const sectorAngle = 360 / this.prizes.length; // 计算每个扇区的角度
        return {
          transform: `rotate(${index * sectorAngle}deg)`, // 设置扇区的旋转角度
        };
      };
    },
  }
};

</script>
<style lang="less" scoped>
.carousel {
  height: calc(100vh - 10rem);
  box-sizing: border-box;
  background-image: url("/src/assets/images/抽奖2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.9;

  .white_img{
    position: absolute;
    top: 26.8rem;
    left: 6.5rem;
  img{
    position: relative;
    left: 38%;
    width: 6rem;
    z-index: 4;
  }
    .button{
      padding: 0.6rem;
      width: 5rem;
      height: 5rem;
      border-radius: 50px;
      position: relative;
      right: 12%;
      bottom: 3.3rem;
      z-index: 5;;
      border: none;
      color: white;
      font-size: 18px;
      white-space: pre-wrap;
      background-color: #ffa21a;
    }

  }

}

.wheel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20rem;
}

.wheel {
  top: 75%;
  right: 1%;
  width: 22rem;
  height: 22rem;
  //background-color: #eee;
  border-radius: 50%;
  position: relative;

  animation-name: rotate-wheel;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.spinning {
  animation-play-state: running;
}

@keyframes rotate-wheel {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.sector {
  position: absolute;
  left: 26%;
  width: 11rem;
  height: 11rem;
  line-height: 5.5rem;
  text-align: center;
  background-color: #f78938;
  border-radius: 50%;
  transform-origin: bottom center;
  font-weight: bold;
  color: #fff;
  font-size: 14px;
}

.count{
  position: fixed;
  bottom: 25%;
  left: 25%;
   z-index: 10;
  font-size: 20px;
  font-weight: 800;
}
</style>
